<template>
  <div class="shevel_container">
    <div class="shevel_left">
      <div class="title">
        <span class="tip" @click="console.log(formData)">商品名</span>
        <input type="text" v-model="formData.title" placeholder="请输入商品名" />
      </div>
      <div class="categories">
        <span class="tip">分类</span>
        <input type="text" v-model="formData.category" placeholder="请输入所属类别" />
      </div>
      <div class="counter">
        <span class="tip">数量</span>
        <input type="text" v-model.number="formData.stockNumber" placeholder="商品数量" />
      </div>
      <div class="discount">
        <span class="tip" style="color: black; width: 35px; padding: 0;">价格:</span>
        <input class="price" v-model.number="formData.price" type="text">
        <span style="margin-left:5px ;">是否支持砍价</span>
        <a-switch v-model:checked="isDiscount" />
      </div>
      <div class="pictures">
        <span class="tip">商品图</span>
        <a-upload style="margin-top: 5px;" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
          :before-upload="handleBeforeUpload" @change="handleChange">
          <div>
            <plus-outlined></plus-outlined>
            <div class="ant-upload-text">上传</div>
          </div>
        </a-upload>
      </div>
      <div class="btn" @click="handleClick">
        <a-button style="width: 46%; margin-top: 6px; size:large;">
          确定
        </a-button>
      </div>
    </div>
    <div class="shevel_right">
      <div class="picture_list">
        <div class="pic" v-for="(item, index) in formData.images" :key="index">
          <div class="cancelUpload" @click.stop="cancelUpload(item)">
            <CloseOutlined />
          </div>
          <img :src="item" alt="" />
        </div>
      </div>
      <div class="edit">
        <div style="border: 1px solid #ccc ;height: 98%; ; display: flex;flex-direction: column;">
          <Toolbar style="height: 48px; border-bottom: 1px solid #ccc" :editor="editorRef"
            :defaultConfig="toolbarConfig" mode="simple" />
          <Editor style="flex: 1; overflow-y: hidden;" v-model="formData.description" :defaultConfig="editorConfig"
            mode="simple" @onCreated="handleCreated" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue';
import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { message } from 'ant-design-vue';
import { uploadFile, uploadFileByUrl } from '@/service/module/upload/upload';
import { Scene } from '@/constants';
import { addGoods } from '@/service/module/goods/goods';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { getGoodManageDetail } from '@/service/module/goods/goods';
import { CloseOutlined } from '@ant-design/icons-vue';
const route = useRoute()

watch(() => route.query.id, (newId) => {
  if (newId) {
    getGoodManageDetail(newId as string).then(res => {
      console.log('res', res);
      formData.value = res.data
    })
  }
}
  , { immediate: true })

const router = useRouter()

//文件上传
async function handleBeforeUpload(file) {
  const isImage = file.type.startsWith('image/')
  if (!isImage) {
    message.error('只能上传图片文件！')
  }
  return false
}

async function handleChange(info) {
  if (formData.value.images.length >= 5) {
    message.error('最多上传5张图片！')
    return
  }
  const uploadCertificate = await uploadFile(info.file.name, Scene.FileUpload)
  await uploadFileByUrl(uploadCertificate.data.uploadUrl, info.file.type, info.file)
  formData.value.images.push(uploadCertificate.data.downloadUrl)
}
function cancelUpload(item) {
  const index = formData.value.images.indexOf(item)
  console.log(0);

  if (index !== -1) {
    formData.value.images.splice(index, 1)
  }
}

const formData = ref({
  title: '',
  category: '',
  price: '',
  stockNumber: '',
  description: '',
  images: [] as string[],
});

function resetFormData() {
  formData.value.category = ''
  formData.value.stockNumber = ''
  formData.value.price = ''
  formData.value.description = ''
  formData.value.images = []
}

const isDiscount = ref(false);

const editorRef = shallowRef()


const toolbarConfig = {
  toolbarKeys: [
    'headerSelect',
    'bold',
    // 'italic',
    // 'underline',
    // 'through',
    'color',
    // 'bgColor',
    'fontSize',
    'fontFamily',
    'bulletedList',
    'numberedList',
    // 'todo',
    // 'justifyLeft',
    // 'justifyRight',
    // 'justifyCenter',
    // 'justifyJustify',
    'indent',
    'delIndent',
    'emotion',
    // 'insertTable',
    // 'code',
    'blockquote',
    'undo',
    'redo',
  ]
}
const editorConfig = { placeholder: '介绍一下你闲置的物品吧...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

const handleClick = async () => {
  console.log('f', formData);
  await addGoods(formData.value)
  message.success('商品已闲置');
  resetFormData()
  router.back()
}
</script>

<style lang="less" scoped>
@import '../../../assets/css/primary/index.less';

.shevel_container {
  width: 1362px;
  height: 90%;
  background-color: #fff;
  border-radius: 15px;
  padding: 12px;
  display: flex;

  .shevel_left {
    width: 30%;
    height: 320px;
    border-radius: 15px;
    padding: 12px;

    input {
      margin-left: 5px;
    }

    .discount {
      margin-top: 14px;
      height: 40px;
      padding: 3px;
      display: flex;
      align-items: center;

      span {
        display: block;
        font-size: 15px;
        line-height: 40px;
        color: #a1a1a1;
        font-weight: 500;
        margin-right: 12px;
      }

      .price {
        width: 80px;
        height: 36px;
        border-radius: 5px;
        outline: none;
        border: none;
        background-color: #f6f6f6;
      }
    }


  }

  .shevel_right {
    width: 70%;
    display: flex;
    flex-direction: column;

    .picture_list {
      padding: 0 5px;
      width: 96%;
      height: 150px;
      border-radius: 15px;
      margin-top: 12px;
      display: flex;
      justify-content: start;
      align-items: center;
      overflow: hidden;

      .pic {
        margin-left: 5px;
        width: 120px;
        height: 120px;
        margin-right: 10px;
        border-radius: 15px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border: #e7e7e7 1px solid;
        cursor: pointer;
        position: relative;

        .cancelUpload {
          position: absolute;
          top: 0;
          right: 0;
          width: 20px;
          height: 20px;
          color: #000;
          text-align: center;
          line-height: 20px;
          cursor: pointer;
          z-index: 99;
        }

        img {
          padding: 3px;
          height: 88px;
          width: 98%;
          object-fit: cover;
          object-position: center;
          border-radius: 10px;
          display: block;
          z-index: 9;
        }
      }
    }

    .edit {
      padding: 8px;
      flex: 1;

    }

  }

  .tip {
    margin-top: 3px;
    display: block;
    padding: 8px;
    font-size: 20px;
    font-weight: 600;
  }

  input {
    margin-top: 3px;
    outline: none;
    border: none;
    border-radius: 5px;
    width: 100%;
    height: 36px;
    background-color: #f6f6f6;
  }
}

@media (max-width: 1362px) {
  .shevel_container {
    width: 1040px;
  }
}
</style>
